@use '../core/variables' as *;
@use '../core/mixins' as *;
@use '../core/bootstrap';

.site-sidebar {
  padding: $site-content-top-padding $site-sidebar-side-padding;

  // Customization for sidebar in mobile nav
  &.site-sidebar--header {
    padding-left: bootstrap.bs-spacer(2);
    padding-top: 0;
    padding-bottom: 0;

    > .nav > .nav-item {
      font-size: $font-size-base;
    }

    > .nav > .nav-item,
    > .nav > .nav-item .nav .nav-item {
      .nav-link {
        padding-bottom: bootstrap.bs-spacer(2);
        padding-top: bootstrap.bs-spacer(2);
      }
    }
  }

  .nav-link {
    padding: bootstrap.bs-spacer(1) 0;
    position: relative;
    color: inherit;

    &.disabled {
      opacity: 0.5;
    }
  }

  @mixin collapsable() {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;

    &::after {
      content: 'keyboard_arrow_down';
      font: $site-font-icon;
      transition: transform .25s ease-in-out;
      -webkit-font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
    }

    &:not(.collapsed) {
      &::after {
        transform: rotate(180deg);
      }
    }
  }

  // Top-level nav item
  > .nav > .nav-item {
    font-family: $site-font-family-alt;

    &:first-child {
      > .nav-link {
        padding-top: 0;
      }
    }

    > .nav-link {
      padding: bootstrap.bs-spacer(3) 0;

      @include collapsable();
    }
  }

  // Sub navs
  > .nav .nav {
    padding-left: bootstrap.bs-spacer(4);

    .nav-item {
      font-size: bootstrap.$font-size-sm;

      > .nav-link {
        color: $site-color-body-light;

        &.active {
          font-weight: bootstrap.$font-weight-bold;

          &:not(.collapsable) {
            color: $site-color-primary;
          }
        }

        &.collapsable {
          &::before {
            content: 'arrow_drop_down';
            font: $site-font-icon;
            left: -24px;
            position: absolute;
            top: 4px;
            transition: transform .25s ease-in-out;
          }

          &.collapsed {
            &::before {
              transform: rotate(-90deg);
            }
          }
        }
      }
    }
  }
}

// Overrides that had been added to main.scss
// TODO these should be merged with the above defaults
#sidenav {
  @include sidenav-top-position;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 226px;
  border-right: 1px solid #d8d8d8;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1;
  font-family: $site-font-family-alt;

  .open_menu & {
    z-index: 10000;
  }

  .site-sidebar {
    // override shared/_sidebar.scss
    padding: $top-content-padding 30px $content-padding;

    // override shared/_sidebar.scss
    // the first-level nav block is indented on the same level as the headers
    > .nav > .nav-item > .nav {
      padding-left: 0;
    }

    .nav-link {
      font-family: $site-font-family-alt;
      font-weight: 400;
      color: $site-color-body;
      font-size: $font-size-small;

      .open_menu & {
        padding-bottom: 21px;
      }

      // center text and arrow button
      display: flex;
      flex-direction: row;
      align-items: center;

      // copy of shared/_sidebar.scss
      // @mixin collapsable() is not reachable from here, this is a copy of that
      &.collapsable {
        display: flex;
        align-items: center;
        justify-content: space-between;

        &::after {
          content: 'keyboard_arrow_down';
          font: $site-font-icon;
          transition: transform .25s ease-in-out;
        }

        &:not(.collapsed) {
          &::after {
            transform: rotate(180deg);
          }
        }
      }

      // override shared/_sidebar.scss
      &.collapsable::before {
        display: none;
      }


      &.external {
        &::after {
          display: none;
        }
      }

      &[data-toggle] {
        &:not(.collapsable) {
          font-family: $site-font-family-gsans;
          font-weight: 400;
          font-size: 18px;
        }

        &.active {
          color: #555555;
        }
      }

      &.active {
        color: $brand-primary;
        font-weight: 400;
      }
    }

    .navbar-nav {
      display: none;

      @media(max-width: 1024px) {
        display: block;
        margin-bottom: 1rem;

        a.nav-link {
          font-family: $site-font-family-gsans;
          font-weight: 400;
          font-size: 20px;

          &.active {
            color: $site-color-body
          }
        }
      }
    }
  }
}
